<template>
  <div class="bg-gray-100 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-gray-800 mb-4">👶 子组件</h2>
    <div class="space-y-3">
      <p class="text-gray-600">
        通过 inject 接收到的用户名：
        <span class="font-semibold text-blue-600">{{ username || '未接收到数据' }}</span>
      </p>
      <div class="text-sm text-gray-500 bg-white p-3 rounded border-l-4 border-blue-400">
        <strong>说明：</strong> 子组件使用 inject('username') 接收父组件提供的数据。
        由于父组件提供的是普通变量而非响应式引用，所以即使父组件修改了变量值，
        子组件也不会自动更新显示。
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'

// 从父组件注入用户名
const username = inject<string>('username')

console.log('子组件接收到的 username:', username)
</script>